<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="../include/tag.jsp" %>
<!DOCTYPE html>
<html lang="zh">
<head>
    <meta name="referrer" content="never">
    <title>自定义菜单</title>
    <%@include file="../include/commonFile.jsp" %>
    <script src="${ctxStatic}/vue/vue.min.js"></script>
    <link rel="stylesheet" href="${ctx}/css/ui/wxMgr/menuMgr.css">
</head>
<body>
<div id="url_panel" style="display: none" class="mt15">
    <form class="layui-form" action="">
        <input type="hidden" :value="val.tid" name="tid">
        <div class="layui-form-item">
            <label class="layui-form-label">文字内容：</label>
            <div class="layui-input-inline">
                <input type="text" name="text" :value="val.text" required lay-verify="required" placeholder="请填写此字段"
                       autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">文字链接：</label>
            <div class="layui-input-inline">
                <input type="text" name="link" :value="val.link" required lay-verify="required" placeholder="请填写此字段"
                       autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block mr10">
                <a href="javascript:void(0)" class="layui-btn layui-btn-danger r" lay-submit lay-filter="urlForm">提交</a>
            </div>
        </div>
    </form>
</div>
<!--头部-->
<%@include file="../include/header.jsp" %>
<div class="index-outside" id="menu_main">
    <%@include file="../include/sidebar.jsp" %>
    <!--内容-->
    <section>
        <div class="section-main">
            <div class="menu-wrap customMenuPage" >
                <blockquote class="layui-elem-quote" style="border-color:#e8473f">1、注意及时保存菜单配置，菜单只有发布后才会在手机侧显示。<br/>
                    2、微信对于公众号自定义菜单有一定缓存时间，发布菜单后如果想及时看到菜单修改，可以取消关注再重新关注公众号快速的看到新菜单
                </blockquote>
                <div class="manageBox clearfix">
                    <!-- 微信模拟界面开始 -->
                    <div class="phoneBox">
                        <div class="wxHeader">
                            <%--<h1 class="wxAcName">创毅行</h1>--%>
                        </div>
                        <div class="wxMenuBar">
                            <div class="iconBox"></div>
                            <div class="menuBox">
                                <div class="newMenu" v-show="menuList.length<=0" @click="addMenu()"><span
                                        class="menuText">添加菜单</span></div>
                                <div class="menuGroup have3menuItem" v-show="menuList.length>0"
                                     :class="{'have3menuItem':menuList.length>=2}">
                                    <div class="menuItem" v-cloak v-for="(menuItem, $index) in menuList"
                                         :data-name="menuItem.name" @click="selectMenu(menuItem,1)" >
                                        <span class="">{{menuItem.name}}</span>
                                        <div class="selectedBox" v-show="selectedItem === menuItem">
                                            <div class="delBtn" @click="delMenu(menuItem,$index,null)"></div>
                                        </div>
                                        <div class="subMenuGroup">
                                            <div class="subMenuItem ng-scope"
                                                 v-for="(subMenuItem,$subIndex) in menuItem.subList"
                                                 @click.stop="selectMenu(subMenuItem,2)">
                                                <span>{{subMenuItem.name}}</span>
                                                <div class="selectedBox" v-show="selectedItem === subMenuItem">
                                                    <div class="delBtn" @click.stop="delMenu(subMenuItem,$index,$subIndex)"></div>
                                                </div>
                                            </div>
                                            <div class="subMenuItem newSubItem" @click.stop="addSubMenu($index,menuItem.id)"
                                                 v-show="menuItem.subList && menuItem.subList.length<5"></div>
                                        </div>
                                    </div>
                                    <div class="menuItem newItem" @click="addMenu()" v-show="menuList.length<3"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- 微信模拟界面结束 -->
                    <!-- 菜单设置面板开始 -->
                    <div class="settingBox">
                        <!-- 未选中菜单时的展示面板开始 -->
                        <div class="noSelectMenuBox ng-hide" v-show="!selectedItem">
                            点击左侧「添加」按钮添加主菜单
                        </div>
                        <!-- 未选中菜单时的展示面板结束 -->
                        <!-- 设置面板开始 -->
                        <div class="selectMenuBox" v-if="selectedItem">
                            <div class="menuNameSettingBox">
                                <h1 class="settingTitle">菜单名称
                                    <span class="hint" v-show="selectedItem._level == 2">（字数不超过8个汉字或者16个字符）</span>
                                    <span class="hint" v-show="selectedItem._level == 1">（字数不超过4个汉字或者8个字符）</span>
                                </h1>
                                <input type="text" class="textInput" v-model="selectedItem.name"
                                       @keyup="checkMenuName()">
                                <p class="invalidHint ng-binding ng-hide" v-show="selectedItem.nameLengthValid==false">
                                    最多输入8个汉字或16个字符</p>
                            </div>
                            <div class="menuFunSettingBox"
                                 v-show="selectedItem.type!=4 && (!selectedItem.subList || selectedItem.subList.length==0)">
                                <h1 class="settingTitle">菜单功能 <span class="hint">（四选一）</span></h1>
                                <div class="settingDrawer" id="linkSettingDrawer">
                                    <h1 class="drawerTitle">
                                        <input type="radio" name="replyType" value="1" id="jumpLink" class="radio"
                                               v-model="selectedItem.actionType"><label for="jumpLink">跳转链接</label>
                                    </h1>
                                    <div class="drawerPanel clearfix" v-show="selectedItem.actionType==1">
                                        <div class="linkIcon"></div>
                                        <div class="linkSetting">
                                            <p>点击菜单跳转到以下链接</p>
                                            <input type="text" class="textInput" :value="selectedItem.url"
                                                   v-model="selectedItem.url"  placeholder="请以http://开始"/>
                                        </div>
                                    </div>
                                </div>
                                <div class="settingDrawer" id="contentSettingDrawer" >
                                    <h1 class="drawerTitle">
                                        <input type="radio" name="replyType" value="0" id="replyText" class="radio"
                                               v-model="selectedItem.actionType" ><label for="replyText">回复消息文本</label>
                                    </h1>
                                    <div class="drawerPanel clearfix" v-show="selectedItem.actionType==0">
                                        <div class="content" fai-reply-text="selectedItem.content"
                                             fai-error="contentErr">
                                            <div class="fai-reply">
                                                <div class="contentedit" id="contentedit" contenteditable="true"
                                                     v-html="selectedItem.content" @blur="changeSelContent"
                                                     @keyup="checkContent"></div>
                                                <div class="footerbar">
                                                    <%--<div class="icon face left css_faceEditor" fai-face-editor="" fai-select="select($val)"></div>--%>
                                                    <div class="icon linkIcon left css_urlEditor"
                                                         @click="openUrlPanel()"></div><!-- ngIf: faiComplete -->
                                                    <div class="wordnum tr r">还可以输入 <span>600</span> 字</div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="settingDrawer" id="msgBoxSettingDrawer" >
                                    <h1 class="drawerTitle">
                                        <input type="radio" name="replyType" value="3" id="replyMsgBox"
                                               class="radio ng-dirty" v-model="selectedItem.actionType"><label
                                            for="replyMsgBox">回复图文消息</label>
                                    </h1>
                                    <div class="drawerPanel clearfi" v-show="selectedItem.actionType==3">
                                        <div class="operationBox">
                                            <span class="icon editBtn ng-isolate-scope" v-show="selectedItem.msgBox"
                                                  fai-message-editor="selectedItem.msgBox"
                                                  fai-complete="saveMsgBox($success,$val)"></span>
                                        </div>
                                        <div v-show="selectedItem.material != null">
                                            <div class="news_box dib" v-for="origin in selectedItem.material">
                                                <div class="news_content">
                                                    <h4 class="news_content_title">{{origin.title}}</h4>
                                                    <div class="image_wrap" :style="origin.thumbUrl!= null?'background-image:url('+origin.thumbUrl+')':'background-image:url('+origin.thumb_url+')'" v-show="origin.thumbUrl!=null || origin.thumb_url!=null"></div>
                                                    <div class="image_wrap" style="background-image:url(${ctx}/image/posterImg.png)" v-show="origin.thumbUrl == null && origin.thumb_url == null"></div>
                                                    <p class="news_content_author">{{origin.digest}}</p>
                                                </div>
                                            </div>
                                            <a class="layui-btn layui-btn-danger mb30 ml30" @click="delPreview('news')">删除</a>
                                        </div>
                                        <div class="addBtn" v-show="selectedItem.material == null" v-show="!selectedItem.msgBox"
                                             fai-message-editor="selectedItem.msgBox"
                                             fai-complete="saveMsgBox($success,$val)" @click="selectMaterial('news')"><span>从素材库中选择</span></div>
                                        <%--<div>--%>
                                            <%--<div class="news_box">--%>
                                                <%--<div class="news_content">--%>
                                                    <%--<h4 class="news_content_title">{{newsItem.title}}</h4>--%>
                                                    <%--<div class="image_wrap" :style="'background-image:url('+newsItem.thumb_url+')'" v-show="newsItem.thumb_url"></div>--%>
                                                    <%--<div class="image_wrap" style="background-image:url(${ctx}/image/posterImg.png)" v-show="!newsItem.thumb_url"></div>--%>
                                                    <%--&lt;%&ndash;<p class="news_content_author">{{newsItem.author}}</p>&ndash;%&gt;--%>
                                                    <%--<p class="news_content_author">{{newsItem.digest}}</p>--%>
                                                <%--</div>--%>
                                            <%--</div>--%>
                                        <%--</div>--%>
                                        <%--<div class="addBtn" v-show="!selectedItem.msgBox"--%>
                                             <%--fai-message-editor="selectedItem.msgBox"--%>
                                             <%--fai-complete="saveMsgBox($success,$val)"><span>添加图文消息</span></div>--%>
                                        <%--<msg-box msg-box-info="selectedItem.msgBox" init-data="_initData" class="ng-isolate-scope">--%>
                                        <%--<div class="left wxMsgBox" v-show="msgBoxInfo.length > 0"><p class="singleTitle ng-binding" v-show="msgBoxInfo.length == 1" ng-bind="msgBoxInfo[0].title">标题</p>--%>
                                        <%--<p class="time" v-show="msgBoxInfo.length == 1 && msgBoxInfo[0].type!=5">8月29日</p>--%>
                                        <%--<div class="bigArticleBox"><img ng-src="http://139802.h41.faiusr.com/2/ACkIABACGAAg4ZOUzQUotPPOwQcwyAE4yAE.jpg" src="http://139802.h41.faiusr.com/2/ACkIABACGAAg4ZOUzQUotPPOwQcwyAE4yAE.jpg">--%>
                                        <%--<div class="msgTitle ng-hide" v-show="msgBoxInfo.length > 1"><p ng-bind="msgBoxInfo[0].title" class="ng-binding">标题</p></div>--%>
                                        <%--<p class="desc ng-binding" v-show="msgBoxInfo.length == 1" ng-bind="msgBoxInfo[0].description">11233</p></div><!-- ngRepeat: boxItem in msgBoxInfo.slice(1) track by $index --></div>--%>
                                        <%--</msg-box>--%>
                                    </div>
                                </div>
                                <!-- start 回复图片 -->
                                <div class="settingDrawer" id="msgBoxSettingDrawer" >
                                    <div type="file" id="uploadPictureDiv" style="display:none">
                                        <input type="file" name="uploadPicture" id="uploadPicture" style="display:none" class="ng-scope" />
                                    </div>
                                    <h1 class="drawerTitle">
                                        <input type="radio" name="replyType" value="2" id="pictureBox"
                                               class="radio ng-dirty ng-valid-parse" v-model="selectedItem.actionType"><label
                                            for="pictureBox">回复图片</label>
                                    </h1>
                                    <div class="drawerPanel clearfix" v-show="selectedItem.actionType==2">
                                        <div class="operationBox">
                                            <span class="icon editBtn" ng-click="replyPicture()"
                                                  v-show="selectedItem.pictureBox"></span>
                                        </div>
                                        <div v-show="selectedItem.material != null">
                                            <div class="news_box dib" v-for="origin in selectedItem.material">
                                                <div class="image_wrap" style="margin-top:0" :style="'background-image:url('+origin.url+')'"></div>
                                            </div>
                                            <a class="layui-btn layui-btn-danger mb30 ml30" @click="delPreview('image')">删除</a>
                                        </div>
                                        <div class="addBtn" v-show="selectedItem.material == null" v-show="!selectedItem.msgBox"
                                             fai-message-editor="selectedItem.msgBox"
                                             fai-complete="saveMsgBox($success,$val)" @click="selectMaterial('image')"><span>从素材库中选择</span></div>
                                        <%--<div class="addBtn ng-hide" v-show="!selectedItem.pictureBox"--%>
                                             <%--ng-click="replyPicture()"><span>添加图片</span></div>--%>
                                        <div class="pictureBox left" v-show="selectedItem.pictureBox">
                                            <div class="bigArticleBox"><img
                                                    ng-src="http://139802.h41.faiusr.com/2/ACkIABACGAAg9JSUzQUo-qHulwcwoAs4hAc.jpg"
                                                    src="http://139802.h41.faiusr.com/2/ACkIABACGAAg9JSUzQUo-qHulwcwoAs4hAc.jpg">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <!-- end 回复图片 -->
                                <!-- start 回复语音 -->
                                <%--<div class="settingDrawer" id="msgBoxSettingDrawer">
                                    <h1 class="drawerTitle">
                                        <input type="radio" name="replyType" value="6" id="voiceBox" class="radio ng-dirty" v-model="selectedItem.type"><label for="voiceBox">回复语音</label>
                                    </h1>
                                    <div class="drawerPanel clearfix ng-hide" v-show="selectedItem.type==6">
                                        <div class="operationBox">
                                            <span class="icon editBtn ng-hide" ng-click="uploadVoice()" v-show="selectedItem.voiceBox"></span>
                                        </div>
                                        <div class="addBtn" v-show="!selectedItem.voiceBox" ng-click="uploadVoice()"><span>添加语音</span></div>
                                        <div class="wxMsgBox left ng-hide" style="width: 337px;height: 98px;margin: 5px;" v-show="selectedItem.voiceBox">
                                            <div ng-click="changeMusicIcon(1)" class="musicBox">
                                                <div ng-class="musicIcon"></div>
                                                <div class="musicTitle">
                                                    <div class="ng-binding"></div>
                                                    <div class="ng-binding"></div>
                                                </div>
                                            </div>
                                            <audio style="display:none" id="musicAttention" controls="controls"></audio>
                                        </div>
                                    </div>
                                </div>--%>
                                <!-- end 回复图片 -->
                            </div>
                            <div class="menuOtherTypeTipsBox ng-hide"
                                 v-show="selectedItem.type==4 && (!selectedItem.subMenuList || selectedItem.subMenuList.length==0)">
                                <p class="useAlert">该菜单同步数据时，因微信接口问题无法获取设置数据，请<span
                                        ng-click="resetMenuType()">重新设置</span></p>
                            </div>
                            <div class="menuTipsBox ng-hide"
                                 v-show="(selectedItem.subMenuList && selectedItem.subMenuList.length>0)">
                                <p>已有子菜单，无法设置菜单</p>
                            </div>
                        </div>
                        <!-- 设置面板结束 -->
                        <div class="panelTri"></div>

                    </div>
                    <!-- 菜单设置面板结束 -->
                    <div class="tc mt30">
                        <a href="javascript:void(0)" class="layui-btn layui-btn-normal" lay-submit @click="saveMenu">立即提交</a>
                    </div>


                </div>
            </div>
        </div><!--底部-->
        <%@include file="../include/footer.jsp" %>
    </section>
    <div id="materialImageRepo" style="display: none">
    <div class="news_wrapper" v-for="item in materialImage" >
        <div v-if="selectedItem.actionType != null && selectedItem.actionType == 3">
            <div class="news_box" v-for="newsItem in item.content.news_item">
                <div class="news_content">
                    <h4 class="news_content_title">{{newsItem.title}}</h4>
                    <div class="image_wrap" :style="'background-image:url('+newsItem.thumb_url+')'" v-show="newsItem.thumb_url"></div>
                    <div class="image_wrap" style="background-image:url(${ctx}/image/posterImg.png)" v-show="!newsItem.thumb_url"></div>
                    <%--<p class="news_content_author">{{newsItem.author}}</p>--%>
                    <p class="news_content_author">{{newsItem.digest}}</p>
                </div>
            </div>
        </div>
        <div v-if="selectedItem.actionType != null && selectedItem.actionType == 2">
            <div class="news_box">
                <div class="image_wrap" style="margin-top:0" :style="'background-image:url('+item.url+')'"></div>
            </div>
        </div>
        <div class="edit_mask" @click="chooseMaterial(item.media_id,item)" :class="selectedItem.mediaId !=null && item.media_id == selectedItem.mediaId? 'edit_mask_select':''">
            <i class="iconfont icon-check news_content_check"></i>
        </div>
    </div>
    <form class="layui-form" action="javascript:next()" id="myImage">
        <input type="hidden" name="pageNo" id="pageNo"/>
    </form>
    <div id="page_content" class="page-container"></div>
</div>
</div>

<script type="text/javascript" src="${ctx}/script/common/list.js"></script>
<script type="text/javascript">
    var form, urlPanelIndex;
    var menuMain, urlPanel;

    function next(){
        var formData = util.serializeForm($('#myImage').serializeArray());
        if(menuMain.selectedItem.actionType == 3){
            formData.type = "news";
        }else{
            formData.type = "image";
        }
        $.ajax({
            url:"${ctx}/wechat/material/getMaterialList.do",
            dataType:'json',
            method:'get',
            contentType:'application/json',
            data:formData,
            success:function(res){
                menuMain.materialImage = res.data.item;
                loadPage("page_content", res.page.totalPages, res.page.page, '#myImage');
            }
        });
    }

    function loadPage(elem, totalCount, page, limit, formName) {
        loadPageNew({
            elem: elem,
            totalCount: totalCount,
            page: page,
            limit: limit,
            formName: formName
        });
    }

    function changeLinkData(tag) {
        urlPanel.$set(urlPanel, 'val', $(tag).data('val'));
        menuMain.openUrlPanel();
    }
    function checkLength(l) {
        var n = 0;
        for (var m = 0; m < l.length; m++) {
            if ((l.charCodeAt(m) < 0) || (l.charCodeAt(m) > 255)) {
                n = n + 2
            } else {
                n = n + 1
            }
        }
        return n
    }

    $(function () {

        layui.use(['form'], function () {
            form = layui.form;
            form.on('submit(urlForm)', function (data) {
                if (data.field.tid) {
                    var tag = $('.tag[data-id="' + data.field.tid + '"]');
                    tag.text(data.field.text);
                    tag.data('val', data.field);
                    layer.close(urlPanelIndex);
                    return;
                }
                data.field.tid = new Date().getTime();
                var url = '<a class="tag" contenteditable="false" data-val=\'' + JSON.stringify(data.field) + '\' data-id="' + data.field.tid + '" onclick="changeLinkData(this)">' + data.field.text + '</a>';
                menuMain.$set(menuMain.selectedItem, 'content', (menuMain.selectedItem.content || '') + url);
                layer.close(urlPanelIndex);
            });
        });
        menuMain = new Vue({
            el: '#menu_main',
            data: {
                selectedItem: null, //当前选中的菜单项
                selectedMaterial:null, //当前菜单项选中的素材
                menuList: [],
                exitFlag: false,
                materialImage:{},
                materialNews:{}
            },
            created:function(){
                txz.ajaxRequest({
                    method:'post',
                    url:'${ctx}/wechat/menu/treeList.do',
                    callBack:function(res){
                        if(res.success){
                            if(res.data != null && res.data.length > 0){
                                menuMain.exitFlag = true;
                            }
                            var tmpList = res.data;
                            for(var i in tmpList){
                                var item = tmpList[i];
                                if(item.subList == null || item.subList.length == 0){
                                    //无子菜单的主菜单
                                    if(item.actionType == null){
                                        item.actionType = 1;
                                    }
                                }else{
                                    //子菜单项
                                    for(var index in item.subList){
                                        var sub = item.subList[index];
                                        if(sub.actionType == null){
                                            sub.actionType == 1;
                                        }
                                    }
                                }
                            }
                            menuMain.menuList = tmpList;
                        }else{
                            util.layerMsgError('获取数据失败');
                        }
                    }
                });
            },
            methods: {
                selectMenu: function (item, level) {
                    this.exitFlag = true;
                    //没有选中菜单项时直接切换
                    if(this.selectedItem != null){
                        //对点击同一按钮无效
                        if(this.selectedItem == item){
                            return;
                        }
                        if(this.selectedItem.subList != null && this.selectedItem.subList.length > 0){
                            //有子菜单的主菜单
                            if(!this.checkMenuName()){
                                return;
                            }
                        }else {
                            //无子菜单的主菜单、子菜单
                            if (!this.checkFormData()) {
                                return;
                            }
                        }
                    }
                    this.selectedItem = item;
                    this.$set(this.selectedItem, '_level', level);
                    if(item.mediaId != null){
                        this.selectedMaterial = item.mediaId;
                    }
                },
                changeSelContent: function (e) {
                    this.$set(this.selectedItem, 'content', e.target.innerHTML);
                },
                checkFormData: function () {
                    if (this.selectedItem) {
                        if (!this.checkMenuName()) {
                            var tips = null;
                            if(this.selectedItem._level == 1){
                                tips = "菜单名称请输入4个汉字或者8个字符";
                            }else{
                                tips = "菜单名称请输入8个汉字或者16个字符";
                            }
                            util.layerMsgError(tips);
                            return false;
                        }
                        if (this.selectedItem.actionType == 1) {
                            if (!this.selectedItem.url) {
                                util.layerMsgError('链接不能为空');
                                return false;
                            }
                        } else if (this.selectedItem.actionType == 0) {
                            if (!this.checkContent()) {
                                util.layerMsgError('文本消息不能为空');
                                return false;
                            }
                        }else if(this.selectedItem.actionType == 3){
                            if(!this.selectedItem.mediaId){
                                util.layerMsgError('图文消息不能为空');
                                return false;
                            }
                        }
                        else if(this.selectedItem.actionType == 2){
                            if(!this.selectedItem.mediaId){
                                util.layerMsgError('图片不能为空');
                                return false;
                            }
                        }else{
                            util.layerMsgError('当前菜单没有选中任何选项');
                            menuMain.$set(this.selectedItem,"actionType","1");
                            opFlag = false;
                            return false;
                        }
                    }
                    return true;
                },
                openUrlPanel: function () {
                    urlPanelIndex = layer.open({
                        type: 1,
                        shade: true,
                        shadeClose: true, //开启遮罩关闭
                        shade: 0.8,
                        title: '设置链接',
                        content: $('#url_panel')
                    });
                },
                checkContent: function () {
                    var text = $('#contentedit').text(), lengthValid;
                    if(text == null){
                        return;
                    }
                    if (text.length > 600) {
                        lengthValid = false;
                        $('#contentedit').parent().find('.wordnum').html('已超出<span class="red">' + (text.length - 600) + '</span>字');
                    } else {
                        lengthValid = true;
                        $('#contentedit').parent().find('.wordnum').html('还可以输入<span>' + (600 - text.length) + '</span>字');
                    }
                    if(text.length == 0){
                        lengthValid = false;
                    }
                    return lengthValid;
                },
                checkMenuName: function () {
                    var notNullValid, lengthValid;
                    if (!this.selectedItem.name) {
                        notNullValid = false;
                    } else {
                        notNullValid = true;
                    }
                    if ((this.selectedItem._level == 1 && checkLength(this.selectedItem.name) > 8) || (this.selectedItem._level == 2 && checkLength(this.selectedItem.name) > 16)) {
                        lengthValid = false;
                    } else {
                        lengthValid = true;
                    }
                    return notNullValid && lengthValid;
                },
                addMenu:function(){
                    this.exitFlag = true;
                    if(this.selectedItem != null){
                        if(this.selectedItem.subList != null && this.selectedItem.subList.length > 0){
                            //有子菜单的主菜单
                            if(!this.checkMenuName()){
                                return;
                            }
                        }else {
                            //无子菜单的主菜单
                            if (!this.checkFormData()) {
                                return;
                            }
                        }
                    }
                    var length = this.menuList.length+1;
                    //添加主菜单
                    var item = {
                        "id":length,
                        "name":"菜单名称",
                        "content":null,
                        "parentId":"0",
                        "actionType":1,
                        "url":null,
                        "subList":[],
                        "mediaId":null
                    };
                    this.menuList.push(item);
//                    this.selectMenu(item,1);
                    this.selectedItem = item;
                    this.$set(this.selectedItem, '_level', 1);
                },
                addSubMenu: function (index, parentId) {
                    this.exitFlag = true;
                    if(this.selectedItem != null){
                        if(this.selectedItem.subList != null && this.selectedItem.subList.length > 0){
                            //有子菜单的主菜单
                            if(!this.checkMenuName()){
                                return;
                            }
                        } else {
                            if(parentId == this.selectedItem.id){
                                //想要添加子菜单的主菜单
                                if(!this.checkMenuName()){
                                    return;
                                }
                            }else{
                                //子菜单
                                if (!this.checkFormData()) {
                                    return;
                                }
                            }
                        }
                    }
                    //添加子菜单
                    var item = {
                        "name":"子菜单名称",
                        "content":null,
                        "parentId":parentId,
                        "actionType":1,
                        "url":null,
                        "mediaId":null
                    };
                    this.menuList[index].subList.push(item);
//                    this.selectMenu(item,2);
                    this.selectedItem = item;
                    this.$set(this.selectedItem, '_level', 2);
                },
                delMenu:function(data,mainIndex,subIndex){
                    //发出删除提示
                    var tips = "确定要删除该菜单项？";
                    //判断主菜单是否村子啊子菜单，如果存在则发出连同子菜单一起删除的提示
                    if(data.subList != null && data.subList.length > 0){
                        //有子菜单，
                        tips = "当前菜单项存在子菜单，若删除则连同子菜单一起删除！"
                    }
                    var index = top.layer.confirm(tips,function(res){
                        //维护菜单列表及页面效果展示
                        menuMain.selectedItem = null;
                        if(subIndex != null){
                            //删除子菜单项
                            var item = menuMain.menuList[mainIndex];
                            item.subList.splice(subIndex,1);
                            if(item.subList.length == 0){
                                if(item.actionType == null){
                                    menuMain.$set(item,"actionType","1");
                                }
                            }
                        }else{
                            //删除主菜单
                            menuMain.menuList.splice(mainIndex,1);
                        }
                        top.layer.close(index);
                    })
                },
                saveMenu:function(){
                    if(!this.exitFlag){
                        util.layerMsgError('当前不存在任何菜单项');
                        return;
                    }
                    if(this.menuList != null && this.menuList.length == 0){
                        /*不存在任何菜单*/
                        var index = top.layer.confirm("您将不创建任何菜单项",function(res){
                            $.ajax({
                                url:'${ctx}/wechat/menu/delAllMenu.do',
                                method:'post',
                                dataType:'json',
                                contentType:'application/json',
                                success:function(res){
                                    if (res.success) {
                                        util.layerMsgSuccess("提交成功", function () {
                                            txz.saveStatus = true;
                                            location.href = "${ctx}/wechat/menu/view.do";
                                        });
                                    } else {
                                        util.layerMsgError("申请失败")
                                        console.log(res.description);
                                    }
                                }
                            });
                            top.layer.close(index);
                        });
                    }else{
                        if(this.beforeSubmit()){
                            this.saveSubmit();
                        }
                    }
                },
                beforeSubmit:function(){
                    //提交前数据校验
                    var opFlag = true;
                    for(var i in this.menuList){
                        var item = this.menuList[i];
                        this.selectedItem = item;
                        if(item.subList != null && item.subList.length > 0){
                            //有子菜单的主菜单
                            if (!this.checkMenuName()) {
                                util.layerMsgError('菜单名称请输入4个汉字或者8个字符');
                                opFlag = false;
                                break;
                            }
                            //该主菜单下的子菜单
                            for(var index in item.subList){
                                var sub = item.subList[index];
                                this.selectedItem = sub;
                                if(!this.checkFormData()){
                                    opFlag = false;
                                    break;
                                }
                            }
                        }else{
                            //只有主菜单
                            if(item.actionType == null){
                                util.layerMsgError('当前菜单没有选中任何选项');
                                menuMain.$set(item,"actionType","1");
                                opFlag = false;
                                break;
                            }else{
                                if(!this.checkFormData()){
                                    opFlag = false;
                                }
                            }
                        }
                        if(!opFlag){
                            break;
                        }
                    }
                    if(opFlag){
                        this.selectedItem = null;
                    }
                    return opFlag;
                },
                saveSubmit:function(){
                    //设置最后选中项
                    var finalList = [];
                    for(var i in this.menuList){
                        var item = this.menuList[i];
                        if(item.subList != null && item.subList.length > 0){
                            //有子菜单的主菜单
                            var menu = {
                                "id":item.id,
                                "name":item.name,
                                "parentId":item.parentId
//                                "actionType":item.actionType
                            }
                            finalList.push(menu);
                            for(var index in item.subList){
                                var sub = item.subList[index];
                                var subMenu = {
                                    "id":sub.id,
                                    "name":sub.name,
                                    "parentId":sub.parentId,
                                    "actionType":sub.actionType
                                }
                                switch(sub.actionType){
                                    case "1":
                                    case 1:
                                        subMenu.url = sub.url;
                                        break;
                                    case "0":
                                    case 0:
                                        subMenu.messageType = 0;
                                        subMenu.content = sub.content;
                                        break;
                                    case "3":
                                    case 3:
                                    case "2":
                                    case 2:
                                        subMenu.mediaId = sub.mediaId;
                                        subMenu.material = sub.material;
                                        break;
                                }
                                finalList.push(subMenu);
                            }
                        }else{
                            //无子菜单的主菜单
                            var menu = {
                                "id":item.id,
                                "name":item.name,
                                "parentId":item.parentId,
                                "actionType":item.actionType
                            }
                            switch(item.actionType){
                                case 1:
                                case "1":
                                    menu.url = item.url;
                                    break;
                                case 0:
                                case "0":
                                    menu.messageType = 0;
                                    menu.content = item.content;
                                    break;
                                case 3:
                                case "3":
                                case 2:
                                case "2":
                                    menu.mediaId = item.mediaId;
                                    menu.material = item.material;
                                    break;
                            }
                            finalList.push(menu);
                        }
                    }

                    $.ajax({
                        url:'${ctx}/wechat/menu/create.do',
                        method:'post',
                        dataType:'json',
                        contentType:'application/json',
                        data:JSON.stringify({
                            "menuList":finalList
                        }),
                        success:function(res){
                            if (res.success) {
                                util.layerMsgSuccess("提交成功", function () {
                                    txz.saveStatus = true;
                                    location.href = "${ctx}/wechat/menu/view.do";
                                });
                            } else {
//                                $(data.elem).attr("lay-submit","");
                                util.layerMsgError("申请失败")
                                console.log(res.description);
                            }
                        }
                    });
                },
                selectMaterial:function(type){
                    $.ajax({
                        url:"${ctx}/wechat/material/getMaterialList.do?type="+type,
                        dataType:'json',
                        method:'post',
                        contentType:'application/json',
                        success:function(res){
                            if(res.success){
                                var repo = $('#materialImageRepo');
                                menuMain.materialImage = res.data.item;
                                loadPage("page_content", res.page.totalPages, res.page.page, '#myImage');
                                var index = layer.open({
                                    type:1,
                                    shade:true,
                                    shadeClose:true,
                                    shade:0.8,
                                    title:"选择素材",
                                    area:['1006px','627px'],
                                    btn:['确认','取消'],
                                    content:repo,
                                    yes:function(){
                                        layer.close(index);
                                        menuMain.materialImage = null;
                                    },
                                    btn2:function () {
                                        menuMain.selectedMaterial = null;
//                                        menuMain.$set(menuMain.selectedItem, 'mediaId', null);
//                                        menuMain.$set(menuMain.selectedItem,'material',null);
                                        menuMain.materialImage = null;
                                    },
                                    end:function () {
                                        menuMain.materialImage = null;
                                    }
                                });
                            }else{
                                util.layerMsgError('素材获取失败');
                            }
                        }
                    });
                },
                chooseMaterial:function(mediaId,item){
                    menuMain.$set(menuMain.selectedItem, 'mediaId', mediaId);
                    var obj = [];
                    if(item.content != null && item.content.news_item != null){
//                        obj = ;
                        menuMain.$set(menuMain.selectedItem,'material',item.content.news_item);
                    }else{
                        obj.push(item);
                        menuMain.$set(menuMain.selectedItem,'material',obj);
                    }

                },
                delPreview:function(type){
                    if(type == "image"){
                        tips = "确认删除当前图片？"
                    }else{
                        tips = "确认删除当前图文？"
                    }
                    var index = layer.confirm(tips,function(){
                        menuMain.selectedItem.mediaId = null;
                        menuMain.selectedItem.material = null;
                        layer.close(index);
                    })

                }
            }
        })
        urlPanel = new Vue({
            el: '#url_panel',
            data: {
                val: {}
            },
            methods: {}
        })
    })
</script>
</body>
</html>